import React from "react";
import { Link } from "react-router-dom";
import authService from "../../services/auth";
import "./Unauthorized.css";

const Unauthorized: React.FC = () => {
  const user = authService.getUser();
  const isAuthenticated = authService.getIsAuthenticated();

  return (
    <div className="unauthorized-container">
      <div className="unauthorized-content">
        <div className="unauthorized-icon">🔒</div>
        <h1>访问受限</h1>

        <div className="unauthorized-message">
          {isAuthenticated ? (
            <>
              <p>
                很抱歉，<strong>{user?.username}</strong>
                ，您没有权限访问此页面。
              </p>
              <p className="user-roles">
                您当前的角色:
                {user?.roles.map((role, index) => (
                  <span key={role} className="role-tag">
                    {role}
                    {index < user.roles.length - 1 ? ", " : ""}
                  </span>
                ))}
              </p>
            </>
          ) : (
            <p>请先登录后再尝试访问此页面。</p>
          )}
        </div>

        <div className="unauthorized-actions">
          {isAuthenticated ? (
            <>
              <Link to="/" className="primary-btn">
                返回首页
              </Link>
              <button
                onClick={() => {
                  authService.logout();
                  window.location.href = "/login";
                }}
                className="secondary-btn"
              >
                退出登录
              </button>
            </>
          ) : (
            <>
              <Link to="/login" className="primary-btn">
                前往登录
              </Link>
              <Link to="/" className="secondary-btn">
                返回首页
              </Link>
            </>
          )}
        </div>

        <div className="contact-support">
          <p>如果您认为这是一个错误，请联系管理员。</p>
          <a href="mailto:support@nb-ai.com" className="support-link">
            联系支持团队
          </a>
        </div>
      </div>
    </div>
  );
};

export default Unauthorized;
